<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@ include file="/WEB-INF/views/common/includes.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<script type="text/javascript" src="<c:url value='/static/dataTables/media/js/jquery.dataTables.js'/>"></script>
<script type="text/javascript" src="<c:url value='/static/js/iphone-style-checkboxes.js'/>"></script>
<script type="text/javascript" src="<c:url value='/static/js/jquery.switchify-1.0.js'/>"></script>
<link rel="stylesheet" href="<c:url value='/static/css/iphone-style-checkboxes.css'/>" type="text/css" media="screen"/>

<script type="text/javascript">
$(document).ready(function() {
	$('#example').dataTable( {
		"bPaginate": true,
		"bLengthChange": false,
		"sPaginationType": "full_numbers",
		"bProcessing": true,
		"bServerSide": true,
		"bFilter": true,
		"sAjaxSource": "<c:url value="/es/admin/organization/applications2/all"/>",
		"sAjaxDataProp": "rows",
		"aoColumns": [
			  			{ "mDataProp": "id" },
			  			{ "mDataProp": "name" },
			  			{ "mDataProp": "companyId", "fnRender" : renderCompanyNameById },
			  			{"sName": "installed", "fnRender" : customRender, "bSortable": false, "bSearchable": false}, 
		  			],

		"fnDrawCallback": function () {
				$(':checkbox').iphoneStyle({
					  checkedLabel: 'YES',
					  uncheckedLabel: 'NO'
				}).change(function(){
					if($(this).attr('checked')) {
						manageApplications(true, $(this).val());
					} else {
						manageApplications(false, $(this).val());
					}
				});
			}
	});

});

function renderCompanyNameById(oObj) {
	var company = oObj.aData['companyId']
	var a = company;
	$.ajax({
		async : false,
		type: 'POST',
		url: '<c:url value="/es/admin/application/company/description"/>',    			
		data: {companyId : company},		
		dataType: 'json',
		success: function (companyName) {
			a = companyName;
		},
	});
	return a;

}

function customRender(oObj) {
	var installed = false;
	var id = oObj['id'];
	// LOOKING FOR ANONTHER WAY TO AVOID THIS REPETIVE AJAX CALL. A way to hold the orgId, and how create a cell with actions.
	$.ajax({
   		async :false,
		type: 'POST',
		url: '<c:url value="applications/list"/>',    			
		data: {orgId : id},		
		dataType: 'json',
		success: function (apps) {
			if($.inArray(oObj.aData['id'], apps) != -1) {
				installed = true;
			} 
		},
	});
	
	return '<input type="checkbox" class="switchWidget" value="' + oObj.aData['id'] + '" ' + (installed ? ' checked="true"' : '') + ' />';
}
function manageApplications(add, app) {
	var action = null;
	
	if(add) {
		action = '<c:url value="applications/add"/>';
	} else {
		action = '<c:url value="applications/delete/"/>';
	}
	
	$.ajax({
		type: 'POST',
		url: action,    			
		data: {appId: app},		
		dataType: 'json',
		success: function (result) {
			
		},
	});	
}
</script>

<div class="span-16 last table">		
	<table id="example">
		<thead>
			<tr>
				<th>Id</th>
				<th>Name</th>
				<th>Company</th>
				<th>Installed</th>
			</tr>
		</thead>
	</table>
</div>